<div class="layui-content">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header">角色信息</div>
            <form class="layui-form layui-card-body" action="" lay-filter="role-form" >
                <input type="hidden" id="layerIndex" value="-1">
                <input type="hidden" name="id" value="0">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">角色编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" required lay-verify="required" placeholder="角色编码" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-blue" lay-submit lay-filter="role-form-submit">提交</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script>

    $(function () {
        var form = layui.form;
        var layer = layui.layer;

        //监听提交
        form.on('submit(role-form-submit)', function(data){
            $.post('role/addOrUpdateRole',data.field,function (data) {
                layer.msg('保存成功');
                var layerIndex = $("#layerIndex").val();
                if(layerIndex > 0){
                    layer.close(layerIndex);
                }else{
                    layui.element.tabDelete("tabs", "role/form.html");
                }

                layui.table.reload('roleTable',{
                    page:1
                }); //表格重载
            },'json');

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });

</script>
